<template>
	<div id="visit_record" class="dialog animated"  :class="open? 'fadeIn':'fadeOut'"
		 v-if="show" :style="{visibility:(visible?'visible':'hidden')}">
		<div class="panel animated" :class="open? 'zoomIn':''">
			<div class="title">
				{{audition.className}} 考勤记录
				<div class="close" @click="cancel()"></div>
			</div>
			<div class="form">
				<!-- <span>上课时间</span>
				<el-date-picker
					v-model="selectTime.date"
					type="date"
					placeholder="选择日期">
				</el-date-picker>
				<el-select v-model="selectTime.time" placeholder="选择时间">
					<el-option
						v-for="item in selectTime.timelist"
						:key="item.value"
						:label="item.label"
						:value="item.value">
					</el-option>
				</el-select> -->
				<label>选择上课时间：</label>
				<el-date-picker v-model="classDate" id="classDate"  type="date" placeholder="上课日期"
					:clearable="false" :picker-options="pickerOptions"
					style="width: 1.7rem;" value-format="yyyy-MM-dd" @change="dateChange">
				</el-date-picker>
				&nbsp;
				<el-select v-model="classSyllabusId" placeholder="上课时间段" 
						id="classSyllabusId"	style="width: 1.7rem;" @change="syllabusChange">
						<el-option v-for="item in syllabusList" :key="item.classSyllabusId"
									:label="item.time" :value="item.classSyllabusId">
						</el-option>
				</el-select>
			</div>
			<div class="form" v-if="classSyllabusId">
				<!-- <div class="info">
					<label>上课时间：{{syllabus.time}}</label>
					<label>教室：{{syllabus.classroomName}}</label>
					<label>教师：{{syllabus.teacherUserName}}</label>
					<label>助教：{{syllabus.assisUserName}}</label>
				</div> -->
				<div class="title_sub">学员列表</div>
				<table class="table" cellspacing="0">
					<thead class="thead">
						<tr>
							<td style="width: 2rem;">
								<!-- <div class="check" @click="checkAll(isCheckAll)"
									:class="isCheckAll? 'check_active':''">
									<div>全选</div>
								</div> -->
								考勤
							</td>
							<td style="width: 3rem;">姓名</td>
							<td style="width: 3rem;">报名课程</td>
							<td style="width: 3rem;">家长姓名</td>
							<td style="width: 3rem;">联系电话</td>
						</tr>
					</thead>
					<tbody class="tbody">
						<tr v-for="item in stuList">
							<td>
								<!-- <div class="check" @click="checkStu(item.classStudentId)"
									 :class="checkList.indexOf(item.classStudentId)>-1? 'check_active':''"></div> -->
								<el-select v-model="item.signinMode" style="width: 1rem;">
									<el-option v-for="item in signinMode" :key="item.value"
										:label="item.name" :value="item.value">
									</el-option>
								</el-select>
							</td>
		  					<td>{{item.realName}}</td>
		  					<td>{{item.courseName}}</td>
							<td>{{item.parentName}}</td>
		  					<td>{{item.phone}}</td>
		  				</tr>
					</tbody>
				</table>
				
				<!-- <div class="signin">
					设置考勤状态：
					<el-select v-model="state" @change="selectAttent"
							   style="width: 1.5rem;" placeholder="考勤状态" clearable >
					    <el-option v-for="item in signinMode" :key="item.value"
					      		   :label="item.name" :value="item.value">
					    </el-option>
					</el-select>
				</div> -->
			</div>
			
			<div class="btn_div">
				<div class="btn_cancel" style="margin-right: 0.3rem;" @click="cancel()">取 消</div>
				<div class="btn_sure" style="margin-right: 0rem;" @click="sure()">确定考勤</div>
			</div>
		</div>
	</div>
</template>

<script>
var vm,dict;
export default {
	data : function() {
		return {
			show : false,
			open : false,
			visible : false,
			audition : {},
			syllabus : {},
			state : null,
			stuList : [],
			checkList : [],
			signinMode : [],
			signinMap : null,

			//课节日期和课节时间段列表
			classDate: null,
			syllabusList: [],
			//日期有效性计算
	        pickerOptions : {
				disabledDate : function(date) {
					date = tool.DateToString(date,"yyyy-MM-dd");
					return (vm.syllabusMap[date]? false : true);
				}
			},
			classSyllabusId:null,
		}
	},
	computed : {
		// isCheckAll : function() {
		// 	var len = vm.stuList.length;
		// 	return vm.checkList.length == len && len!=0;
		// }
	},
	methods : {
		init : function(audition) {
			vm.show = true;
			setTimeout(function() { 
				vm.open = true; 
				vm.visible = true;
			},1);
			
			//初始化数据
			vm.checkList = [];
			vm.audition = audition;
			vm.syllabus = audition.syllabus;
			vm.state = "";
			vm.classSyllabusId="";
			vm.audition.studentList = [];
			vm.stuList = [];
			
			//带了学生列表
			// if(audition.studentList) {
			// 	vm.stuList = tool.clone(audition.studentList);
			// } else {
			// 	//从后台请求学生列表
			// 	let param = {
			// 		classId : vm.audition.classId,
			// 		classSyllabusId : vm.syllabus.classSyllabusId
			// 	};
			// 	api.auditionStudent(param).then(function(data) {
			// 		audition.studentList = data.list;
			// 		vm.stuList = tool.clone(data.list);
			// 	})
			// }

			//默认选择最近课节的日期
			vm.classDate = audition.nearTrialClassSyllabus.startTime.substring(0,10);
			var now = tool.DateToString(new Date(),"yyyy-MM-dd HH:mm");
			//判断时间到达上课时间
			if(now < audition.nearTrialClassSyllabus.startTime){
				vm._overNow=true;
			}
			var param = {
				classId : audition.classId,
				// startTime : audition.nearTrialClassSyllabus.startTime
			};
			api.auditionSyllabus(param).then(function(data) {
				//解析日期课节映射
				vm.syllabusMap = vm.getSyllabusMap(data.list);
				//赋值课节列表
				vm.syllabusList = vm.syllabusMap[vm.classDate];
				
			});
		},
		getSyllabusMap : function(list) {
			var m = {};
			list.forEach(function(item){
				var now = tool.DateToString(new Date(),"yyyy-MM-dd HH:mm");
				//判断时间到达上课时间
				if(now >= item.startTime) {
					//截取时间段
					item.time = item.startTime.substring(11,16) + " - "+ item.endTime.substring(11,16);
					//截取日期,作为key
					var k = item.startTime.substring(0,10);
					if(vm._overNow){
						vm.classDate = k;
						vm._overNow=false;
					}
					if(m[k] == null) {
						m[k] = [];
					}
					m[k].push(item);
				}
				
			});
			return m;
		},
		dateChange : function() {
			// debugger
			//获取课节列表,默认选择第一个
			vm.syllabusList = vm.syllabusMap[vm.classDate];
			// vm.classSyllabusId = vm.syllabusList[0].classSyllabusId;
			vm.classSyllabusId = null;
			
			//执行课节改变事件
			// vm.syllabusChange();
		},
		syllabusChange : function() {
			//从后台请求学生列表
			let param = {
				classId : vm.audition.classId,
				classSyllabusId : vm.classSyllabusId
			};
			api.auditionStudent(param).then(function(data) {
				let signinAll=true;
				data.list.forEach(function(item) {
					if(item.signinMode===0){
						signinAll=false;
					}
					item.signinMode=1;
				});
				if(signinAll){
					tool.message({showClose: true, message: "该时间段课程学员已全部签到！", type: 'warning'});
					vm.audition.studentList = [];
					vm.stuList = [];
				}
				else{
					vm.audition.studentList = data.list;
					vm.stuList = tool.clone(data.list);
				}
				
			})
		},
		cancel : function(cb=false) {
			vm.open = false;
			setTimeout(function() {
				vm.show = false;
				vm.visible = false;
				if(cb) vm.$emit('callback');
			},500);
		},
		sure : function() {
			
			var list = [];
			//遍历学生列表,获取有考勤状态的学生
			vm.stuList.forEach(function(item) {
				if(item.signinMode) {
					list.push({
						clueId : item.clueId,
						signinMode : item.signinMode
					})
				}
			});
			//所有学生都没有勾选考勤,直接结束
			if(list.length==0) {
				tool.message({ showClose: true, message: "学员列表为空！", type: 'warning' });
				return;
			}
			var param = {
				classId : vm.audition.classId,
				classSyllabusId : vm.syllabus.classSyllabusId,
				siginList : list,
				_wait : ""
			};
			api.auditionAttend(param).then(function(data) {
				//保存修改后的列表,关闭页面
				vm.audition.studentList = vm.stuList;
				tool.message({ showClose: true, message: "保存成功", type: 'success' });
				vm.cancel(true);
			});
			
		},
		// checkAll : function(flag) {
		// 	//清空勾选列表
		// 	vm.checkList = [];
		// 	//如果不是已勾选的,则勾选全部
		// 	if(!flag) {
		// 		vm.stuList.forEach(function(item){
		// 			vm.checkList.push(item.classStudentId);
		// 		})
		// 	}
		// 	//清空考勤选择框
		// 	vm.state = "";
		// },
		// checkStu : function(id) {
		// 	//获取勾选列表和当前项的序号
		// 	var c = vm.checkList;
		// 	var index = c.indexOf(id);
		// 	if(index>=0) {
		// 		//如果当前id在已勾选列表,则删除
		// 		c.splice(index,1);
		// 	} else {
		// 		//否则添加
		// 		c.push(id);
		// 	}
		// 	//清空考勤选择框
		// 	vm.state = "";
		// },
		// selectAttent : function() {
		// 	//没选择,不处理
		// 	if(vm.state=="") {
		// 		return;
		// 	}
		// 	for(var i=0; i<vm.stuList.length; i++) {
		// 		var item = vm.stuList[i];
		// 		if(vm.checkList.indexOf(item.classStudentId)>-1) {
		// 			item.signinMode = vm.state;
		// 		}
		// 	}
		// }
	},
	created : function() {
		vm = this;
		dict = tool.getItem(lsKey.dict,true);
		dict["signin_mode"].forEach(function(item) {
			if(item.value == 1 || item.value == 5) {
				vm.signinMode.push(item);
			}
		})
		vm.signinMap = tool.parseDict(vm.signinMode);
	}
}

</script>

<style scoped src="@/style/module/dialog.css"></style>
<style scoped src="@/style/module/table.css"></style>
<style scoped>

	.panel {
		width: 12rem;
		margin: 0.5rem auto;
	}
	.form {
		padding: 0 0.3rem;
		color: #666666;
	}
	.info {
		font-size: 0.16rem;	
		padding-top: 0.05rem;
		padding-bottom: 0.2rem;
	}
	.info>label {
		display: inline-block;
		width: 2.2rem;
	}
	.info>label:first-child {
		width: 3.7rem;
	}
	.title_sub {
		font-size: 0.16rem;	
		padding-bottom: 0.1rem;
	}
	.check {
		position: relative;
		margin: 0 auto;
		width: 0.25rem;
		height: 0.25rem;
		background-image: url(../../../assets/img/clue_manage/check_no.png);
		background-position: center center;
		background-repeat: no-repeat;
		background-size: 0.16rem;
		cursor: pointer;
	}
	.check_active {
		background-image: url(../../../assets/img/clue_manage/check_yes.png);
	}
	.check>div {
		position: absolute;
		width: 0.62rem;
		height: 0.25rem;
		text-align: right;
	}
	.signin {
		font-size: 0.16rem;
		color: #666666;
		padding-top: 0.13rem;
	}
</style>